import React, {PropsWithChildren, useCallback, useState} from 'react'
import {Button, Cell, Popup, Space} from "@nutui/nutui-react-taro";
import {getAllGoodsBrand, GoodsBrandSummary} from "../apis/GoodsBrandsApi";
import {getAllGoodsCategories} from "../apis/GoodsCategoriesApi";
import {NumberIdAndName} from "../types/BasicModels";
import {getAllFactory} from "../apis/FactoriesApi";
import SelectableListActionSheet from "./SelectableListActionSheet";
import styles from "./QueryGoodsListFilterDrawer.module.sass"
import {useStatusBarHeight} from "./MyNavigationBar";
import {Text, View} from "@tarojs/components";

export interface QueryGoodsListFilterDrawerProps extends PropsWithChildren {
    visible: boolean
    onClose: () => void
    onConfirm: (data: {
        brandIds: number[],
        categoryIds: number[],
        factoryIds: number[],
    }) => void
}

const QueryGoodsListFilterDrawer: React.FC<QueryGoodsListFilterDrawerProps> = (props) => {
    const [brands, setBrands] = useState<GoodsBrandSummary[]>([])
    const [categories, setCategories] = useState<NumberIdAndName[]>([])
    const [factories, setFactories] = useState<NumberIdAndName[]>([])

    let initialData = useCallback(() => {
        if (!brands.length) {
            getAllGoodsBrand().then(res => {
                setBrands(res.data)
            })
        }
        if (!categories.length) {
            getAllGoodsCategories().then(res => setCategories(res.data))
        }
        if (!factories.length) {
            getAllFactory().then(res => setFactories(res.data))
        }
    }, [brands, categories, factories]);

    const [selectedBrandIds, setSelectedBrandIds] = useState<number[]>([])
    const [selectedCategoryIds, setSelectedCategoryIds] = useState<number[]>([])
    const [selectedFactoryIds, setSelectedFactoryIds] = useState<number[]>([])

    const [showSelectBrandPopup, setShowSelectBrandPopup] = useState(false)
    const [showSelectCategoryPopup, setShowSelectCategoryPopup] = useState(false)
    const [showSelectFactoryPopup, setShowSelectFactoryPopup] = useState(false)

    let statusBarHeight = useStatusBarHeight();
    return <>
        <Popup
            onOpen={() => {
                initialData()
            }}
            visible={props.visible}
            onClose={props.onClose}
            position={"left"}
            className={styles.container}
            style={{paddingTop: statusBarHeight + 'px'}}
        >
            <View>
                <Text className={styles.title}>更多搜索条件</Text>
                {!!brands.length && <Cell onClick={() => setShowSelectBrandPopup(true)}
                                          title={selectedBrandIds.length ? brands.filter(it => selectedBrandIds.includes(it.id)).map(it => it.name).join("、") : "选择品牌"}/>}
                {!!categories.length && <Cell onClick={() => setShowSelectCategoryPopup(true)}
                                              title={selectedCategoryIds.length ? categories.filter(it => selectedCategoryIds.includes(it.id)).map(it => it.name).join("、") : "选择类别"}/>}
                {!!factories.length && <Cell onClick={() => setShowSelectFactoryPopup(true)}
                                             title={selectedFactoryIds.length ? factories.filter(it => selectedFactoryIds.includes(it.id)).map(it => it.name).join("、") : "选择厂商"}/>}
            </View>
            <Space className={styles.actions}>
                <Button type={"primary"} fill={"outline"} onClick={props.onClose}
                        className={styles.button}>取消</Button>
                <Button type={"primary"} className={styles.button} onClick={() => {
                    props.onConfirm({
                        brandIds: selectedBrandIds,
                        factoryIds: selectedFactoryIds,
                        categoryIds: selectedCategoryIds
                    })
                    props.onClose()
                }}>确定</Button>
            </Space>

        </Popup>
        <SelectableListActionSheet visible={showSelectBrandPopup} onCancel={() => setShowSelectBrandPopup(false)}
                                   value={selectedBrandIds} onChange={values => setSelectedBrandIds(values.map(Number))}
                                   options={brands.map(brand => ({label: brand.name, key: brand.id}))}/>
        <SelectableListActionSheet visible={showSelectCategoryPopup} onCancel={() => setShowSelectCategoryPopup(false)}
                                   value={selectedCategoryIds}
                                   onChange={values => setSelectedCategoryIds(values.map(Number))}
                                   options={categories.map(item => ({label: item.name, key: item.id}))}/>
        <SelectableListActionSheet visible={showSelectFactoryPopup} onCancel={() => setShowSelectFactoryPopup(false)}
                                   value={selectedFactoryIds}
                                   onChange={values => setSelectedFactoryIds(values.map(Number))}
                                   options={factories.map(item => ({label: item.name, key: item.id}))}/>
    </>
}

export default QueryGoodsListFilterDrawer


